context diagram level 0

(block formatting context) literal translation is "chunk-level formatting contexts". It is a separate rendering area that only block-level box participates in, which specifies how the internal block-level box is laid out and irrelevant to the outside of the area. So, how do you create a block-

Opening Some elements, such as the float element, such as the element position is Absolute,inline-block,table-cell or table-caption, and the overflow attribute is not a visible element, They will create a new block-level formatting context. The above definition has described in detail how block-level formatting contexts (blocks formatting

contexts?When you add any of the following styles to an element, the BFC is triggered, which means that the element is in a separate BFC container that is isolated from the other elements.1. Float:left/right/inherit is a floating element other than none2. position:absolute/fixed absolute positioning element, fixed is a subclass of absolute, also belongs to absolute positioning3. Display:inline-block/table-cell/table-captions It is important to note that display:table itself cannot trigger BFC,

for blocks formatting context roots", which means that BFC automatically adapts to the height of the child element, even though it includes floating elements in its child elements. Effect as shown: You can also see the Demo. In the example above, there are two div, they each contain a floating p element, but the first Div has a "height collapse" because the internal floating element is detached from the normal stream, so the div is equivalent to an e

structure and appearance. Set overflow Although setting other properties can also raise the BFC property, it has some effect on the layout. The effect of setting the Overflow:hidden is relatively small, but when the child element is too large, the excess is overwritten, and the auto or scroll is set to produce a scroll bar. : After pseudo element By adding a: after pseudo-element to the container and setting the overflow property to the pseudo-element

floating. Using overflow: hidden or overflow: auto to trigger the BFC feature of the parent element of the floating element, it can contain floating elements and close floating. The original W3C text is "'auto' heights for block formatting context roots", that is, BFC automatically adapts to the height based on the condition of sub-elements, even if its sub-elements include floating elements. Effect You can also view the demo. In the above example, t

First, what is BFC Block-level formatting contexts (block formatting context) are part of the Web page CSS visual rendering and are used to determine the layout of the box. In the positioning system belong to the regular flow (normal flow) (the other two positioning systems are floating (floats) and absolute positioning (Absolute positioning)). Second, how BFC form The formation of BFC, according to the sai

the link on how to draw an arrow, that is, the following effect:Here we use the link icon attachment, link icon attachment can also use vector oh, is not great:Link.setstyle (' Icons.names ', [' link_arrow ']);The ' Link_arrow ' here is the name of our registered vector image.Add the vector of the connection, the direction of the line also need to define their own. This is defined by Linkpath, which provides a way to set up the Linkpath on the network:Network.setlinkpathfunction (Createlinkpath

{margin:0; padding:0; } UL, ol {list-Style:none; }. Wrap {width:650px; height:250px; margin:100px Auto0; position:relative; Overflow:hidden; }. Wrap ol {margin-top:50px; }. Wrap img {display:block; }. Wrap ul {height:250px; Z-index:1; position:relative; }. Wrap ol {height:30px; Z-index:2; Position:absolute; Bottom: